<template>
  <div>
    <el-button @click="checkAll"> 全选 </el-button>
    <el-button :disabled="isButtonDisabled">计算</el-button>

    <div v-for="item in checkList" :key="item.id">
      <el-checkbox v-model="item.isAct" @change="handanxuan($event, item)"
        >备选项</el-checkbox
      >
      {{ item.id }}
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      checkList: [
        {
          id: 1,
          isAct: false,
        },
        {
          id: 2,
          isAct: false,
        },
        {
          id: 3,
          isAct: false,
        },
      ],
    };
  },
  computed:{
    isButtonDisabled() {
      return this.checkList.every(item => !item.isAct);
    }
  },

  methods: {
    checkAll() {
      // 全选或取消全选
       this.checkAllfalg = !this.checkAllfalg;
       this.checkList.forEach((item) => (item.isAct = this.checkAllfalg));
    },
    handanxuan(value, item) {
      this.checkList.forEach(it => {
         if(it.id == item.id) {
           item.isAct = value
         }
      })
    },
  },
};
</script>
<style>
#wrapper {
  width: 500px;
  height: 100vh;
}
</style>
